<template>
  <div class="picture-waterfalll">
    <a-card
      title="相似图片"
      class="card-item"
      :loading="pictureVoList?.length === 0"
      style="height: 80vh; overflow: auto; margin-top: 20px"
      ref="scrollContainer"
    >
      <Waterfall :list="pictureVoList">
        <template #default="{ url, item }">
          <a-tooltip color="#fff">
            <template #title>
              <a-space>
                <a-tooltip>
                  <template #title>下载图片</template>
                  <a-button
                    :icon="h(DownloadOutlined)"
                    @click="goDownLoadImage(item.imgUrl as string, item.title as string)"
                  />
                </a-tooltip>
                <a-tooltip>
                  <template #title>上传到私人空间</template>
                  <a-button
                    :icon="h(UploadOutlined)"
                    @click="doAddPicture(item.imgUrl as string, item.title as string)"
                  ></a-button>
                </a-tooltip>
                <a-tooltip placement="bottom">
                  <h3 style="overflow: hidden; color: #666666; width: 50px;height: 25px">{{item.title}}</h3>
                  <template #title>
                    {{ item.title }}
                  </template>
                </a-tooltip>
              </a-space>

            </template>
            <a-card hoverable>
              <LazyImg :url="item.imgUrl" v-if="item.imgUrl" class="lazy-img" />
            </a-card>
          </a-tooltip>


        </template>
      </Waterfall>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { h, ref } from 'vue'
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons-vue'
import { downloadImage } from '@/utils'
import { listSpaceVoByPageUsingPost } from '@/api/spaceController.ts'
import { SPACE_TYPE_ENUM } from '@/constants/space.ts'
import { useUserStore } from '@/stores/user.ts'
import { uploadPictureByUrlUsingPost } from '@/api/pictureController.ts'
import { useRouter } from 'vue-router'
// 下载图片
const goDownLoadImage = (url: string, fileName: string) => {
  downloadImage(url, fileName)
}
const pictureVoList = defineModel<API.ImageSearchResult[]>()
const router = useRouter()
// 保存图片到我的空间
const userStore = useUserStore()
// 获取spaceId
const space = ref<API.SpaceVO>({})
const checkAuth = async () => {
  // 获取用户空间
  const res = await listSpaceVoByPageUsingPost({
    spaceType: SPACE_TYPE_ENUM.PRIVATE,
    userId: userStore?.userInfo?.id,
  })
  if (res.data.code === 0 && res.data.data) {
    space.value = res.data.data?.records?.[0]
  }
}

const loading = ref(false)
// 上传图片url
const handleUpload = async (url: string, title: string) => {
  loading.value = true
  const res = await uploadPictureByUrlUsingPost({
    spaceId: space.value.id,
    fileUrl: url,
    picName: title,
  })
  if (res.data.code != 0) {
    return
  }
  loading.value = false
}

// 加入我的空间
const doAddPicture = async (url: string, title: string) => {
  await checkAuth()
  console.log(space.value)
  await handleUpload(url, title)
  await router.push({
    path: '/space/my',
  })
}
</script>

<style lang="scss" scoped></style>
